<template name="random-stars">
	<view class="container">
		<image class="background-image" mode="aspectFill" src="https://cdn.water-crystal.org/crystals.png" @load="tick"></image>
		<canvas canvas-id="touches" class="canvas" @touchmove="touchMove"></canvas>
		<yu-toast ref="toast" message="用手指涂抹屏幕直到下方数字变为0" :duration="4000" verticalAlign="center"></yu-toast>
		<yu-toast ref="num" :message="run>0? run+'': '0'" :duration="30000" verticalAlign="bottom" backgroundColor="#FFF" color="#F00"></yu-toast>
	</view>
</template>

<script>
	// "use strict";
	// console.clear();
	var log = console.log.bind(console);
	var TAU = Math.PI * 2;
	//
	// CREATE FRAMES
	// ===========================================================================
	function createFrames(numFrames, width, height) {
		var frames = [];
		for (var i = 0; i < numFrames; i++) {
			frames.push({
				x: width * i,
				y: 0,
				width: width,
				height: height
			});
		}
		return frames;
	}
	//
	// REMOVE ITEMS
	// ===========================================================================
	function removeItems(array, startIndex, removeCount) {
		var length = array.length;
		if (startIndex >= length || removeCount === 0) {
			return;
		}
		removeCount = (startIndex + removeCount > length ? length - startIndex : removeCount);
		var len = length - removeCount;
		for (var i = startIndex; i < len; ++i) {
			array[i] = array[i + removeCount];
		}
		array.length = len;
	}
	//
	// RANDOM
	// ===========================================================================
	function random(min, max) {
		if (max == null) {
			max = min;
			min = 0;
		}
		if (min > max) {
			var tmp = min;
			min = max;
			max = tmp;
		}
		return min + (max - min) * Math.random();
	}
	
	function sample(array) {
		return array[(Math.random() * array.length) | 0];
	}
	//
	// PARTICLE
	// ===========================================================================
	class Particle {
		constructor(texture, frame) {
			this.texture = texture;
			this.frame = frame;
			this.alive = false;
			this.width = frame.width;
			this.height = frame.height;
			this.originX = frame.width / 2;
			this.originY = frame.height / 2;
		}
		init(x, y) {
			if (x === void 0) x = 0;
			if (y === void 0) y = 0;
			var angle = random(TAU);
			var force = random(2, 6);
			this.x = x;
			this.y = y;
			this.alpha = 1;
			this.alive = true;
			this.theta = angle;
			this.vx = Math.sin(angle) * force;
			this.vy = Math.cos(angle) * force;
			this.rotation = Math.atan2(this.vy, this.vx);
			this.drag = random(0.82, 0.97);
			this.scale = random(0.1, 1);
			this.wander = random(0.5, 1.0);
			this.matrix = {
				a: 1,
				b: 0,
				c: 0,
				d: 1,
				tx: 0,
				ty: 0
			};
			return this;
		};
		update(){
			var matrix = this.matrix;
			this.x += this.vx;
			this.y += this.vy;
			this.vx *= this.drag;
			this.vy *= this.drag;
			this.theta += random(-0.5, 0.5) * this.wander;
			this.vx += Math.sin(this.theta) * 0.1;
			this.vy += Math.cos(this.theta) * 0.1;
			this.rotation = Math.atan2(this.vy, this.vx);
			this.alpha *= 0.98;
			this.scale *= 0.985;
			this.alive = this.scale > 0.06 && this.alpha > 0.06;
			var cos = Math.cos(this.rotation) * this.scale;
			var sin = Math.sin(this.rotation) * this.scale;
			matrix.a = cos;
			matrix.b = sin;
			matrix.c = -sin;
			matrix.d = cos;
			matrix.tx = this.x - ((this.originX * matrix.a) + (this.originY * matrix.c));
			matrix.ty = this.y - ((this.originX * matrix.b) + (this.originY * matrix.d));
			return this;
		}
		draw(context){
			var m = this.matrix;
			var f = this.frame;
			context.globalAlpha = this.alpha;
			context.setTransform(m.a, m.b, m.c, m.d, m.tx, m.ty);
			context.drawImage(this.texture, f.x, f.y, f.width, f.height, 0, 0, this.width, this.height);
			return this;
		}
	}
	
	
	
	//
	// APP
	// ===========================================================================
	class App{
		constructor(options) {
		   this.pool = [];
		   this.particles = [];
		   this.pointer = {
		   	x: -9999,
		   	y: -9999
		   };
		   this.buffer = document.createElement("canvas");
		   this.bufferContext = this.buffer.getContext("2d");
		   this.supportsFilters = (typeof this.bufferContext.filter !== "undefined");
			this.view = document.querySelector("#view")
			this.texture = document.querySelector("#star-texture")
			this.frames = createFrames(5, 80, 80)
			this.maxParticles = 2000
			this.backgroundColor = "#111111"
			this.blendMode = "lighter"
			this.filterBlur = 50
			this.filterContrast = 300
			this.useBlurFilter = true
			this.useContrastFilter = true
			this.context = this.view.getContext("2d", {
				alpha: false
			})
		}
		pointerMove(event) {
			event.preventDefault();
			var pointer = event.targetTouches ? event.targetTouches[0] : event;
			this.pointer.x = pointer.clientX;
			this.pointer.y = pointer.clientY;
			for (var i = 0; i < random(2, 7); i++) {
				this.spawn(this.pointer.x, this.pointer.y);
			}
		}
		resize(event) {
			this.width = this.buffer.width = this.view.width = window.innerWidth;
			this.height = this.buffer.height = this.view.height = window.innerHeight;
		}
		render(time) {
			var context = this.context;
			var particles = this.particles;
			var bufferContext = this.bufferContext;
			context.fillStyle = this.backgroundColor;
			context.fillRect(0, 0, this.width, this.height);
			bufferContext.globalAlpha = 1;
			bufferContext.setTransform(1, 0, 0, 1, 0, 0);
			bufferContext.clearRect(0, 0, this.width, this.height);
			bufferContext.globalCompositeOperation = this.blendMode;
			for (var i = 0; i < particles.length; i++) {
				var particle = particles[i];
				if (particle.alive) {
					particle.update();
				} else {
					this.pool.push(particle);
					removeItems(particles, i, 1);
				}
			}
			for (let particle of particles) {
				particle.draw(bufferContext);
			}
			if (this.supportsFilters) {
				if (this.useBlurFilter) {
					context.filter = "blur(" + this.filterBlur + "px)";
				}
				context.drawImage(this.buffer, 0, 0);
				if (this.useContrastFilter) {
					context.filter = "drop-shadow(4px 4px 4px rgba(0,0,0,1)) contrast(" + this.filterContrast + "%)";
				}
			}
			context.drawImage(this.buffer, 0, 0);
			context.filter = "none";
			requestAnimationFrame(this.render);
		};
		spawn(x, y) {
			var particle;
			if (this.particles.length > this.maxParticles) {
				particle = this.particles.shift();
			} else if (this.pool.length) {
				particle = this.pool.pop();
			} else {
				particle = new Particle(this.texture, sample(this.frames));
			}
			particle.init(x, y);
			this.particles.push(particle);
			return this;
		};
		start() {
			this.resize();
			this.render();
			this.view.style.visibility = "visible";
			if (window.PointerEvent) {
				window.addEventListener("pointermove", this.pointerMove);
			} else {
				window.addEventListener("mousemove", this.pointerMove);
				window.addEventListener("touchmove", this.pointerMove);
			}
			window.addEventListener("resize", this.resize);
			requestAnimationFrame(this.render);
			return this;
		};
	}
	import yuToast from '@/components/yu-toast/yu-toast'
	export default {
		name: "random-stars",
		components: {
			yuToast
		},
		data() {
			return {

			};
		},
		created(){
			
		},
		mounted(){
			
		}
	}
</script>

<style>

</style>
